<template>
  <div class="index">
     <el-card  class="operate-top-card">
        <i class="el-icon-s-order" style="font-size:18px;margin-right:3px;"></i>
        <span>添加商品分类</span> 
        <el-button class="btn-add"  type="primary" size="mini" @click="$router.back()">返回</el-button>
     </el-card>


     <el-card class="form-container">
       
        <el-form :rules="rules" ref="productCateForm" :model="productCate"  label-width="150px">
          
          <el-form-item label="分类名称" prop="name">
            <el-input v-model="productCate.name"></el-input>
          </el-form-item>

          <el-form-item label="上级分类">
            <el-select v-model="productCate.parent_id" placeholder="请选择上级分类">

              <el-option v-for="item in selectProductCateList" 
                :key="item.id"
                :label="item.name" 
                :value="item.id"
                ></el-option> 

            </el-select>
          </el-form-item>
          
          <el-form-item label="数量单位">
            <el-input v-model="productCate.product_unit"></el-input>
          </el-form-item>

          <el-form-item label="排序:">
            <el-input v-model="productCate.sort"></el-input>
          </el-form-item>

           <el-form-item label="分类是否启用">
            <el-radio-group v-model="productCate.nav_status">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>

  
          <el-form-item label="移动端显示">
            <el-radio-group v-model="productCate.show_status">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
 
          <el-form-item label="分类图标">
            <SingleUpload 
              uoloadAction="/manager/api/auth/category/upload_category"
              :successCallBack="getCategoryIcon"
              :icon="productCate.icon"
              ></SingleUpload>
          </el-form-item>

          <el-form-item label="关键字">
            <el-input v-model="productCate.keywords"></el-input>
          </el-form-item>

 
          <el-form-item label="分类描述">
            <el-input type="textarea" v-model="productCate.description"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="onSubmit('productCateForm')">提交</el-button>
            <el-button type="primary" @click="onReset('productCateForm')">重置</el-button>
          </el-form-item>

        </el-form>

     </el-card>

  </div>
</template>

<script> 
import SingleUpload from '@/components/upload/singleUpload'
import { getCategory,addCategory,getCategoryById,updateCategory} from  '@/api/categoryApi'

const defaultProductCate = {
  parent_id:0,   // 上级分类
  name:'',  // 分类名称 
  product_unit:'',  // 数量单位
  nav_status: 1, // 分类是否启用
  show_status: 1, // 移动端是否显示
  sort: 0,// 排序 
  icon:'', // 分类图标
  keywords:'', // 关键字
  description:'' // 分类描述
}

  export default {
    name: 'ProductCateAddOrEdit',
    props:{
      isUpdate:{
        type:Boolean,
        default: false
      }
    },
    components:{
      SingleUpload
    },
    data(){
      return {
        productCate: Object.assign({},defaultProductCate),
        // 上级分类数组
        selectProductCateList:[],
        rules:{
          name: [
            { required: true, message: '请输入分类名称', trigger: 'blur' },
            { min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }
          ] 
        }
        
      }
    },
    created(){
        
      // 0 判断 
      if(this.isUpdate){ // 编辑
          getCategoryById(this.$route.query.id).then(res=>{
            if(res.status === 1){
              // console.log(res);
              this.productCate = res.data[0]
            }
          })
      }else{ // 添加
           this.productCate = Object.assign({},defaultProductCate)
      }

     // 1 获取分类列表
      this.getProductCategoryList();
    },
    methods:{
      // 图片上传成功或者 删除成功 都会调用
      getCategoryIcon(data){ 
        console.log(data);
        if(data == null){
          // 删除成功
          this.productCate.icon =null;
        }else{
          // 上传成功
          this.productCate.icon = data.name;
        }
        console.log(this.productCate.icon);
      },
      // 1 获取分类列表
      async getProductCategoryList(){
        let res = await getCategory(0,1,100); 
        if(res.status === 1){
          this.selectProductCateList = res.data.category_list;
          this.selectProductCateList.unshift({id:0,name:'无上级分类'})
        }
       
      },
      // 提交
      onSubmit(formName){
        this.$refs[formName].validate(async (valild)=>{
            if(!valild) return;

            if(this.isUpdate){ // 编辑
              let res = await updateCategory(this.productCate); 
              if(res.status === 1){
                // // 清空表单
                this.onReset(formName)
                // 成功提示
                this.$message.success(res.msg)
                // 跳转列表页面
                this.$router.push('productCategory') 
              }else{
                this.$message.error(res.msg)
              } 
            }else{ // 添加
                const res =  await addCategory(this.productCate);
                if(res.status === 1){
                  // // 清空表单
                  this.onReset(formName)
                  // 成功提示
                  this.$message.success(res.msg)
                  // 跳转列表页面
                  this.$router.push('productCategory')
                  
                }else{
                  this.$message.error(res.msg)
                } 
            }
            
        })
      },
      // 重置
      onReset(formName){
        this.$refs[formName].resetFields();
        this.productCate = Object.assign({},defaultProductCate);
      }

    }
  }
</script>

<style lang="less" scoped>

</style>
